<template>
  <App11 v-if="show" :logo="logo" :text="text"></App11>
</template>

<script setup lang="ts">
import { onMounted, provide, ref, watch, computed, inject, App } from "vue";

import App11 from "../sciencechat/Appteam.vue";
import Studycodemodel from "@/mysql_interface/studycodemodel";

import { asyncgetteam } from "@/api";
import { getThirdLevelDomain } from "@/util/data";
const logo =
  "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/CloudClassroom/logo_whtite.svg";
const text = "数据监控平台";

const team = ref<Studycodemodel.Iteam>();
const show = ref(false);

// 获取app实例
const app = inject<App>("app");
onMounted(() => {
  start();
});

async function start() {
  const obj = getThirdLevelDomain();
  team.value = await asyncgetteam(obj);
}

function setdata() {
  if (team.value && team.value.ID) {
    console.log("team.value:", team.value);
    // 使用app.provide()动态提供值
    app?.provide("chat", Number(team.value.ID));
    app?.provide("title", team.value.other?.datatitle || "");
    app?.provide(
      "icon",
      team.value.other?.saasTeamLogo ||
        "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/CloudClassroom/logo_whtite.svg"
    );
    app?.provide(
      "titlesize",
      (team.value?.other?.datatitle?.length || 0) > 12 ? "24px" : "36px"
    );
    document.title = team.value.name || "";
    show.value = true;
  } else {
    console.log("team.value is undefined or missing ID:", team.value);
    show.value = false;
  }
}

watch(
  () => team.value?.ID,
  () => {
    setdata();
  },
  { immediate: true }
);
</script>

<style scoped>
.main {
  margin-bottom: 25px;
}
</style>

<style>
html,
body,
#app {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

#app {
  position: relative;
}

#app button:focus {
  outline: 0px !important;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

pre {
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  border: #ddd solid 1px;
  background: #f8f8f8;
  border-radius: 3px;
  overflow: auto;
  font-size: 0.875em;
  font-family: monospace;
  min-height: 30px;
}

a:hover {
  text-decoration: none;
}

.table tr td {
  font-size: 15px;
}

.text-00c8a5 {
  color: var(--color-cheng) !important;
}

.bg-00c8a5 {
  background-color: var(--color-cheng) !important;
  color: #fff;
}
</style>
